let vm = new Vue({
    el: "#app",
    // 自定义Vue模版语法
    delimiters: ['[[', ']]'],
    data: {
        // v-model
        username: '',
        password: '',
        password2: '',
        mobile: '',
        image_code: '',
        sms_code: '',  // 短信验证码
        allow: '',
        sms_code_tip: '获取短信验证码',
        send_sms_flag: false,  // 获取短信验证码按钮是否被点击

        // 图片验证码
        uuid: '',
        image_code_url: '',  // 图形验证码地址

        // v-show
        username_error: false,
        password_error: false,
        password2_error: false,
        mobile_error: false,
        image_code_error: false,
        allow_error: true,
        sms_code_error: true,


        // message
        username_error_message: '',
        mobile_error_message: '',
        image_code_error_message: '',
        sms_code_error_message: '请填写短信验证码'
    },
    // 页面加载完成vue执行的生命周期函数
    mounted() {
        // 创建图形验证码请求路径
        this.generate_image_code();
    },
    methods: {

        // 生成图形验证码地址
        generate_image_code() {
            // 获取uuid
            this.uuid = generateUUID();
            // 生成图片验证码请求路径
            this.image_code_url = '/image_codes/' + this.uuid + '/';
        },

        // es6语法函数定义
        check_username(){  // 校验用户名
            // 规定输入的用户名是5-20位的数字字母下划线
            // 定义正则
            let re = /^[a-zA-Z0-9_-]{5,20}$/;
            // 进行匹配
            if (re.test(this.username)){
                // 密码匹配成功
                this.username_error = false;
            } else {
                // 密码匹配失败
                this.username_error = true;
                this.username_error_message = '请输入5-20位由数字字母下划线组成的用户名'
            }

            // 判断用户名是否重复注册
            if (this.username_error == false) { // 只有当用户输入的用户名满足条件时才回去判断
                let url = '/usernames/' + this.username + '/count/';
                axios.get(url, {
                    responseType: 'json'
                })
                    .then(response => {
                        if (response.data.count == 1) {
                            // 用户名已存在
                            this.username_error_message = '用户名已存在';
                            this.username_error = true;
                        } else {
                            // 用户名不存在
                            this.username_error = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response);
                    })
            }
        },

        check_password(){  // 校验密码
            let re = /^[a-zA-Z0-9_-]{8,20}$/
            if (re.test(this.password)) {
                this.password_error = false;
            } else{
                this.password_error = true;
            }
        },

        check_password2() {  // 确认密码
            if (this.password != this.password2) {
                this.password2_error = true;
            } else {
                this.password2_error = false;
            }
        },

        check_mobile(){  // 校验手机号
            let re = /^1[3-9]\d{9}$/
            if (re.test(this.mobile)){
                this.mobile_error = false;
            } else {
                this.mobile_error = true;
                this.mobile_error_message = '请输入正确的手机号码'
            }

            // 判断手机号是否重复注册
            if (this.mobile_error == false) {
                // 输入手机号格式正确
                let url = '/mobiles/' + this.mobile + '/count/'
                axios.get(url, {responseType: 'json'})
                    .then(response => {
                        if (response.data.count == 1) {
                            // 重复
                            this.mobile_error = true;
                            this.mobile_error_message = '手机号已被注册';
                        } else {
                            // 不重复
                            this.mobile_error = false;
                        }
                    })
                    .catch(error => {
                        console.log(error.response)
                    })
            }
        },

        check_image_code() {  // 检测图形验证码
            if (!this.image_code) {
                this.image_code_error = true;
                this.image_code_error_message = '请输入验证码';
            } else {
                this.image_code_error = false;
            }
        },

        check_allow(){  // 校验是否勾选协议
            if (!this.allow){
                this.allow_error = true;
            } else {
                this.allow_error = false;
            }
        },

        query_sms_code(){  // 获取短信验证码
            // 设置获取短信验证码是否被点击的标识，防止恶意用户测试
            if (this.send_sms_flag == true){
                return;
            }
            this.send_sms_flag = true;

            // 校验参数
            this.check_mobile();
            this.check_image_code();
            if (this.mobile_error || this.image_code_error){
                this.send_sms_flag = false;  // 请求数据用问题要重新点击
                return;
            }
            let url = '/sms_codes/' + this.mobile + '/?image_code=' + this.image_code + '&uuid=' + this.uuid;
            axios.get(url, {responseType: 'json'})
                .then(response => {
                    if (response.data.code == '0') {
                        // 成功获取短信验证码
                        let num = 60;
                        // let t = setInterval('回调函数', '时间间隔以毫秒为单位'), t是定时器编号
                        let t = setInterval(() => {
                            this.sms_code_tip = num + '秒';
                            num -= 1;
                            if (num == 1) {
                                clearInterval(t);  // 清除定时器
                                this.send_sms_flag = false;
                                this.generate_image_code();  // 倒计时结束重新生成图片验证码
                                this.sms_code_tip = '获取短信验证码';  // 倒计时结束还原获取验证码标签
                            }
                        }, 1000)
                    } else {
                        // 未能获取短信验证码
                        if (response.data.code == '4001') {  // 图形验证码错误
                            this.image_code_error = true;
                            this.image_code_error_message = response.data.errmsg;
                        } else {
                            // 4002短信验证码错误
                            this.sms_code_error = true;
                            this.sms_code_error_message = response.data.errmsg;

                        }
                        this.send_sms_flag = false;  // 响应结果有问题要重新点击
                    }
                })
                .catch(error => {
                    console.log(error.response)
                    this.send_sms_flag = false;  // 服务器错误可以重新点击
                })

        },

        check_sms_code(){  // 检测是否输入了短信验证码
            if(!this.sms_code) {
                // 没有输入短信验证码
                this.sms_code_error = true;
            } else {
                // 输入了短信验证阿们
                this.sms_code_error = false;
            }
        },

        on_submit(){  // 提交表单校验
            // 提交表单前再次确认是否修改
            this.check_username();
            this.check_password();
            this.check_password2();
            this.check_mobile();
            this.check_image_code();
            this.check_allow();

            if (this.username_error == true || this.password_error == true || this.password2_error == true || this.mobile_error == true || this.allow_error == true || this.image_code_error == true){
                // 存在不符合要求的信息，拦截提交
                window.event.returnValue = false;
            }
        }

    }
})